<!-- 沟通记录编辑 -->
<template>
	<view style="background-color: #fff;height: 100%;">
		<!-- 自定义头部组件 -->
		<HeaderTitle :title="title" :isBack="true" :isSearch="false" />
		<div style="padding: 30rpx;">
			<uni-forms ref="form" :modelValue="entity" label-width="100px">
				<div>
					<uni-forms-item label="客户名称：" :rules="$rules.handle.CustomerName" required name="CustomerName">
						<view @click="CustomerChoice">
							<uni-easyinput v-model="entity.CustomerName" placeholder="请选择客户" suffixIcon="compose"
								:disabled="true" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="日期：" :rules="$rules.handle.DailyRecordDate" required name="DailyRecordDate">
						<view @click="DailyRecordDateClick">
							<uni-easyinput v-model="entity.DailyRecordDate" placeholder="请选择日期" :disabled="true" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="标题：" :rules="$rules.handle.DailyRecordTitle" required
						name="DailyRecordTitle">
						<uni-easyinput v-model="entity.DailyRecordTitle" placeholder="请输入标题" :disabled="disabled" />
					</uni-forms-item>
					<uni-forms-item label="抄送：" name="SharerName">
						<view @click="DailyRecordTitle(entity.SharerName)">
							<uni-easyinput v-model="entity.SharerName" placeholder="请选择抄送" :disabled="disabled" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="关键字：">
						<uni-easyinput type="text" confirmType="done" v-model="keyword" placeholder="请使用【回车】分词"
							:disabled="disabled" @confirm="down" />
					</uni-forms-item>
					<view style="display: flex;padding: 10rpx;flex-wrap: wrap;">
						<u-tag style="margin-right: 15rpx;margin-bottom: 15rpx;" :closeable="!disabled"
							v-for="(item, index) in WordList" :key="index" :text="item" @close="tagClick(index)" />
					</view>
					<uni-forms-item label="交流内容:" :rules="$rules.handle.DailyRecord" required name="DailyRecord">
						<uni-easyinput v-model="entity.DailyRecord" placeholder="请输入交流内容" :disabled="disabled"
							@keydown.enter.stop="down" type="textarea" />
					</uni-forms-item>
					<uni-forms-item label="上传附件" class="uploadFile">
						<!-- :action="'http://121.36.26.224:10001/CustomerManagement/Cust_CustomerLinkMan/UploadFileByForm'" -->
						<Upload ref="Upload" :disabled="disabled" @handlerSuccess="handlerSuccess"
							:action="$ActionUrl+'/CustomerManagement/SalesmanDailyRecord/UploadFileByForm'"
							@handlerRmoveFile="handlerRmoveFile">
						</Upload>
					</uni-forms-item>
				</div>
			</uni-forms>
			<div class="submitButton" v-if="!disabled">
				<!-- @click="buttonSubmitChange" -->
				<u-button :disabled="disabled" type="primary" style="font-size: 14px;margin-top: 20rpx;"
					@click="onSubmit()" :loading="loading">提交</u-button>
			</div>
			<Myuser @customerChoice="Client" ref="myuser" />
			<Product @Product="Product" ref="product" />
			<!-- 选择日期 -->
			<u-calendar v-model="isCalendar" :mode="mode" placeholder="请选择日期" @change="calendarChange"></u-calendar>
			<!-- 执行人弹出层 -->
			<UniPopup ref="UniPopup" @confrim="UniPopupConfrim" />
			<mumu-previewOffce :fileUrl='fileUrl' v-model='showPreview'></mumu-previewOffce>
		</div>
	</view>
</template>

<script>
	import {
		SalesmanDailyRecordGetTheData,
		SalesmanDailyRecordSaveData
	} from '@/api/interface.js'
	import Upload from "../../components/upload.vue"
	//客户
	import Myuser from "@/components/OwnUser.vue";
	import Product from "../../components/Product.vue";
	// 引入执行人组件
	import UniPopup from "../../components/UniPopup.vue";
	// 引入顶部navbar组件
	import HeaderTitle from '@/components/header/header-title.vue'
	export default {
		props: {
			parentObj: Object,
		},
		components: {
			Upload,
			Myuser,
			Product,
			UniPopup,
			HeaderTitle
		},
		data() {
			return {
				showPreview: false,
				fileUrl: "",
				uploadFile: [], //附件上传列表
				title: "",
				loading: false,
				// 是否显示日期弹窗
				isCalendar: false,
				// 日期选择
				mode: 'date',
				// 按钮是否禁用
				disabled: false,
				// 上传附件列表数据
				fileList: [],
				title: "编辑",
				WordList: [],
				// 关键字
				keyword: "",
				entity: {
					reportPic: "",
				},
				data: [],
				show: false,
				Id: "",
				info: "",
				thumbUrl: "",
			};
		},
		onLoad(options) {
			console.log('沟通记录详情', options)
			this.title = options.title
			uni.setNavigationBarTitle({
				title: options.title
			})

			if (options.title === '查看沟通记录') {
				this.disabled = true
				this.$nextTick(function() {
					this.$refs.Upload.show = true
					this.$refs.Upload.deletable = false
				})
			} else {
				this.disabled = false
				this.$nextTick(function() {
					this.$refs.Upload.show = false
					this.$refs.Upload.deletable = true
				})

			}

			// 获取沟通记录详情
			this.GetTheDataDetail(options.Id);
		},
		// watch: {
		// 	//监听显示高度
		// 	showHeight: function() {
		// 		if (this.docmHeight > this.showHeight) {
		// 			//隐藏
		// 			this.hideshow = false;
		// 		} else {
		// 			//显示
		// 			this.hideshow = true;
		// 		}
		// 	},
		// },
		mounted() {},
		methods: {
			// 附件上传成功
			handlerSuccess(file) {
				this.uploadFile = file
				console.log('上传成功了,传递到父组件中的附件附件附件-this.uploadFile--------------------------', this.uploadFile)
			},
			// 附件删除
			handlerRmoveFile(file) {
				this.uploadFile = file
				console.log('附件删除了传递过来父组件中的----this.uploadFile--------', this.uploadFile)
			},
			// 抄送点击事件
			DailyRecordTitle(SharerName) {
				if (this.disabled) return
				this.$refs.UniPopup.openForm(SharerName)
			},
			// 日期点击事件
			DailyRecordDateClick() {
				if (this.disabled) return
				this.isCalendar = true
			},
			// 上传成功
			onSuccess(file) {
				console.log('最终上传成功传递过来的', file)
				var that = this
				let File = []
				let SDRDTOList = []
				if (file.length > 0) {
					let newFile = file
					newFile.forEach(item => {
						File.push(item.url)
						let obj = {
							FileURL: item.url
						}
						SDRDTOList.push(obj)
					})

					this.entity.SDRDTOList = SDRDTOList
					// this.uploadFile = SDRDTOList
					this.entity.File = File
				}
				console.log('上传传过来了', File, SDRDTOList, this.uploadFile, this.entity)
			},
			// 移除附件
			handlerRemove(list, index) {
				if (this.entity.File && this.entity.File.length > 0) {
					this.entity.File.splice(index, 1)
				}
				if (this.uploadFile.length > 0) {
					this.uploadFile.splice(index, 1)
				}
				this.entity.SDRDTOList = this.uploadFile.map(item => {
					return {
						FileURL: item.url
					}
				})
			},

			onListChange(file) {
				let fileList = file.map(item => {
					return {
						url: item.url.url
					}
				})
			},
			// 抄送人回调
			UniPopupConfrim(list) {
				this.$forceUpdate()
				let SharerNameArr = list.map(item => ({
					ExecutorId: item.Id,
					ExecutorName: item.RealName
				}));
				let SharerName = SharerNameArr.map(item => {
					return item.ExecutorName
				}).join("|");
				let SharerIds = SharerNameArr.map(item => {
					return item.ExecutorId
				}).join("|");
				// 抄送人赋值
				this.entity.SharerName = SharerName
				this.entity.SharerIds = SharerIds
				this.$refs.UniPopup.close()

			},
			// 选择日期
			calendarChange(event) {
				this.entity.DailyRecordDate = event.result
			},
			// 获取沟通记录详情
			GetTheDataDetail(ID) {
				SalesmanDailyRecordGetTheData({
						id: ID,
					})
					.then((res) => {
						if (res.Success) {
							this.entity = res.Data;
							this.$set(this.entity, "File", []);
							// 时间格式化 去掉末尾的000
							this.entity.DailyRecordDate = this.$moment(this.entity.DailyRecordDate).format(
								'YYYY-MM-DD');
							// 渲染关键字
							this.WordList = res.Data.DRKeyWordList;
							// 渲染图片
							// if (res.Data.SDRDTOList.length > 0) {
							// 	this.uploadFile = res.Data.SDRDTOList.map(item => {
							// 		return {
							// 			url: item.FileURL
							// 		}
							// 	})
							// }
							// 抄送回显
							if (res.Data.SharerNameList && res.Data.SharerNameList.length > 0) {
								this.entity.SharerName = res.Data.SharerNameList.join('|')
							}
							// 处理附件回显
							this.$refs.Upload.setFileShowList(res.Data.SDRDTOList)
							this.uploadFile = res.Data.SDRDTOList
							console.log('获取沟通记录详情', this.entity, res.Data, this.uploadFile)


						} else {

							this.$errorToast(res.Msg);
						}
					});
			},
			// 关键字删除
			tagClick(index) {
				if (this.disabled == false) {
					this.WordList.splice(index, 1);
				}
			},
			// 关键字
			down() {
				if (this.disabled == false) {
					if (!this.WordList) {
						this.WordList = [];
					}
					console.log(this.keyword);
					console.log(this.WordList);
					let a = this.WordList.includes(this.keyword);
					if (!a && this.keyword != "") {
						this.WordList.push(this.keyword);
					} else {
						Toast.fail("关键字不能重复或者为空");
					}
					this.keyword = "";
				}
			},
			formatDate(date) {
				var time = new Date(date);
				var y = time.getFullYear();

				return `${y}-${date.getMonth() + 1}-${date.getDate()}`;
			},
			//选中的产品
			Product(a) {
				console.log(a, "选择产品信息");

				this.data.push({
					ProductId: a.cInvCode,
					cInvName: a.cInvName,
					cInvCode: a.cInvCode,
					cInvStd: a.cInvStd,
				});
			},

			Client(a) {
				console.log(a);
				this.$set(this.entity, "CustomerName", a.cCusName);

				this.entity.CustomerId = a.cCusCode;
			},
			//选择客户
			CustomerChoice() {
				if (this.disabled) return
				if (this.title === '修改沟通记录') {
					this.$refs.myuser.openForm();
				}
			},
			getDataList() {
				this.http
					.post("/QuotationManagement/Quot_OfferSheetMain/GetTheDataOfAll", {
						SortField: "Id",
						SortType: "desc",
						Search: {
							Condition: "Id",
							Keyword: this.Id,
						},
					})
					.then((res) => {
						if (res.Success) {
							// this.entity = res.Data;
							this.data = res.Data.QOSD_List;
						} else {
							Toast(res.Msg);
						}
					});
			},
			init() {
				this.show = true;
				this.data = [];
				this.WordList = [];
				this.entity = {};
				this.$set(this.entity, "DailyRecord", "");
				this.http.post("/Base_Manage/Home/GetOperatorInfo").then((resJson) => {
					this.info = resJson.Data.UserInfo;
				});
			},
			// 表单提交
			onSubmit() {
				var that = this

				this.$refs.form.validate().then(res => {
					this.loading = true

					this.loading = true
					this.entity.SalesmanName = this.info.RealName;
					this.entity.DRKeyWordList = this.WordList;
					if (this.uploadFile.length > 0) {
						this.entity.File = this.uploadFile.map(item => {
							return item.url ? item.url : item.FileURL
						})
						this.entity.SDRDTOList = this.uploadFile.map(item => {
							return {
								FileURL: item.url ? item.url : item.FileURL
							}
						})

						this.entity['BusinessCardURL'] = this.entity.File.join(',')

					} else {
						this.entity.File = []
						this.entity.SDRDTOList = []
					}
					console.log('获取提交参数', this.entity, this.uploadFile)

					uni.showLoading({
						title: '提交中'
					})
					SalesmanDailyRecordSaveData(this.entity)
						.then((res) => {
							if (res.Success) {
								this.$sucessToast("修改成功");
								setTimeout(() => {
									this.loading = false;
									uni.navigateBack()
									uni.hideLoading()
								}, 2500);
							} else {
								this.loading = false;
								uni.hideLoading()
								this.$errorToast(res.Msg);
							}
						});

				}).catch(err => {
					this.$errorToast(err)
					uni.hideLoading()
					that.loading = false
				})

			},
			// 打开编辑页
			openForm(row) {
				this.init();

				if (row) {
					// this.entity = row;
					this.WordList = this.entity.DRKeyWordList;
					if (this.entity.DailyRecordDate) {
						console.log(this.entity.DailyRecordDate);
						this.entity.DailyRecordDate = this.entity.DailyRecordDate.substring(
							0,
							10
						);
					}
				}
			},
		},
	};
</script>

<style lang="less" scoped>
	// 覆盖带有uni-forms-item的upload附件的样式位置
	::v-deep.uni-forms-item.uploadFile {
		display: flex !important;
		flex-direction: column;
	}

	/* 适配底部导航栏 */
	.submitButton {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 150px;
		/*暂时发现安卓小屏手机安全区为0 && 不带单位的话padding-bottom会失效，写一个兜底, 并写在最上面；f12发现css样式如果都给height设置样式，会依次往下，用最底下的一个样式，如果最下面的没失效，依次往上查找，所以兜底的写在最上面 */
		height: calc(150rpx + constant(safe-area-inset-bottom));
		/* 直接扩展高度，因为padding-bottom是内边距 */
		height: calc(150rpx + env(safe-area-inset-bottom));
		/* 直接扩展高度 */
		background: #fff;
		padding-top: 10rpx;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 iOS<11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容iOS>= 11.2*/
		border-top: 1px solid #e9e9e9;
		padding-left: 15px;
		padding-right: 15px;
	}

	.van-field--min-height .van-field__control {
		min-height: 104px !important;
	}

	.scrollBar {
		height: calc(100vh - 230px);
		/* padding-bottom: 80px; */
		overflow: auto;
	}

	.close {
		position: "absolute";

		right: 0;
		bottom: 0;
		padding: "5px 16px";
		background: "#fff";
		text-align: right;
		z-index: 1;
	}


	.box {
		width: 80%;
		height: 200px;
		overflow: auto;
		margin: 0 auto;

		border: 1px solid #ccc;
		/* box-shadow: rgba(128, 128, 128, 0.1) 10px 10px 10px 10px; */

		margin-top: 20px;
		margin-bottom: 10px;
	}

	.tagClass {
		color: #000;
		padding: 5px;
		background-color: #ccc;
		border-radius: 8px;
		margin-left: 5px;
		padding-left: 10px;
	}
</style>